<template>
  <el-form :model="form" ref="form" :rules="rules" class="form">

    <el-form-item class="form-item" prop="username">
      <el-input v-model="form.username" placeholder="用户名/手机">
      </el-input>
    </el-form-item>


    <!-- prop 是绑定验证-->
    <el-form-item class="form-item" prop="password">
      <el-input v-model="form.password" placeholder="密码" type="password" @keyup.enter.native="enter">
      </el-input>
    </el-form-item>

    <p class="form-text">
      <nuxt-link to="#">忘记密码</nuxt-link>
    </p>

    <el-button class="submit" type="primary" @click="handleLoginSubmit">
      登录
    </el-button>
  </el-form>

</template>

<script>
  export default {
    data() {
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      }

      // var pwd = (rule, value, callback) => {
      //   if (!value) {
      //     return callback(new Error('密码不能为空'));
      //   } else {
      //     const reg =/^(\w){6,20}$/
      //     console.log(reg.test(value));
      //     if (reg.test(value)) {
      //       callback();
      //     } else {
      //       return callback(new Error('请输入正确的密码'));
      //     }
      //   }
      // }

      return {
        // 表单数据
        form: {
          username: '',
          password: ''
        },
        // 表单规则
        rules: {
          username: [{
            validator: checkPhone,
            trigger: 'blur'
          }],
          password: [{
            // validator: pwd,
            trigger: 'blur'
          }]
        },
      }
    },
    methods: {
      // 提交登录
     async handleLoginSubmit() {


        // console.log(this.form)
        // validates element-uid form表单的放啊 提供一个回调函数是否通过验证
        // this.$refs.form.validate(valid => {
          // console.log(valid)
          // if (valid) {
          //   this.$axios({
          //     url: '/accounts/login',
          //     method: 'post',
          //     data: this.form
          //   }).then(res => {
          //     console.log("登陆成功", res);
          //     // const data = res.data
          //     // 存数据到store仓库 vuex不能直接修改这个属性值
          //     // this.$store.state.user=res.data;
          //     // 调用mutations下的方法来修改getUserInfo
          //     this.$store.commit('user/setUserInfo', res.data)
          //   }).catch(res => {
          //     console.log('登陆失败', res.response);
          //   })
          // }
        // })
		try{
			//调用封装的登陆接口
			await this.$store.dispatch('user/login',this.form)
			  // 转跳到首页
			  this.$router.replace('/'),
			  // 提示登陆成功
			  this.$message.success('登陆成功')
		}catch(e){
			//TODO handle the exception
		}

      },




     enter: async function(e) {
              var keyCode = window.event ? e.keyCode : e.whith
              if (keyCode == 13) {
              try{
                await this.$store.dispatch('user/login',this.form)
                // 转跳到首页
                this.$router.replace('/'),
                // 提示登陆成功
                this.$message.success('登陆成功')
              }catch(e){
                //TODO handle the exception
              }
              }

            },

    }
  }
</script>

<style scoped lang="less">
  .form {
    padding: 25px;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-text {
    font-size: 12px;
    color: #409EFF;
    text-align: right;
    line-height: 1;
  }

  .submit {
    width: 100%;
    margin-top: 10px;
  }
</style>
